<template>
  <div class="list-container">
    <h1>本网站搜录的出版社</h1>
    <div class="list">
      <!-- 出版社列表 -->
      <el-tag
          v-for="publisher in filteredPublishers"
          :key="publisher"
          type="info"
          @click.native="goToPublisher(publisher)"
      >
        {{ publisher }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { books } from "@/assets/data/booksData";
import '@/assets/css/List.css';
export default {
  name: 'PublisherList',
  computed: {
    filteredPublishers() {
      // 从 books 中提取所有不重复的出版社，并去掉所有空格
      const allPublishers = books.flatMap(book => book.publisher.replace(/\s+/g, ''));
      return [...new Set(allPublishers)];
    },
  },
  methods: {
    goToPublisher(publisher) {
      const encodedPublisher = encodeURIComponent(publisher);
      this.$router.push({ path: `/publisherbooklist/${encodedPublisher}` });
    },
  },
};
</script>
